<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-on事件绑定</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .active{
            background-color: green;
        }
    </style>
</head>

<body>
    <div id='app'>
        <h3>{{num}}</h3>
        <button v-on:click.once="handleClick">+1</button>
        <div class='box' :class='{active:isActive}'></div>
        <button @click='changeClick'>切换</button>
        <input v-on:keyup.up="submit">
    </div>
    <script src="./vue.js"></script>
    <script>

        /* 
        
        1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

        2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

        3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
        
        */
        new Vue({
            el: '#app',
            data: {
                num:0,
                isActive:false
            },
            methods: {
                handleClick(){
                    this.num+=1;
                },
                changeClick(){
                  this.isActive = !this.isActive;
                },
                submit(){
                    alert(1);
                }
            },
        })
    </script>
</body>

</html>